<template>
  <div class="box">
    <div class="content">
      <header>
        <a class="fl logo" href="https://wireai.com/" target="_blank">
          <img :src="`${shopurl}logo.png`" />
        </a>
        <nav>
          <span class="title" @click="toUrl('/')">
            <i>WIRE AI</i>
          </span>
          <span class="title" @click="toUrl('/shop')">
            <i>积分商城</i>
          </span>
          <span class="title active" @click="toUrl('/member')">
            <i>个人中心</i>
          </span>
          <span class="title" @click="toUrl('/ranklist')">
            <i>积分助力榜</i>
          </span>
        </nav>
      </header>
      <div class="userInfo">
        <div class="info clearfix">
          <el-skeleton :loading="loading" animated v-if="isMember">
            <template #template>
              <div class="user fl">
                <div class="pic">
                  <el-skeleton-item
                    variant="image"
                    style="width: 64px; height: 64px; border-radius: 50%"
                  />
                  <span class="sex show"></span>
                </div>
                <div class="cont">
                  <span class="icon">{{
                    memberInfo?.identity == "丝网买家" ? "买" : "企"
                  }}</span>
                  <span class="name show">
                    <el-skeleton-item
                      variant="text"
                      class="name show"
                      style="width: 120px"
                    />
                  </span>
                  <span class="tell show">
                    <el-skeleton-item
                      variant="text"
                      class="name show"
                      style="width: 150px"
                    />
                  </span>
                  <span class="title show">
                    <el-skeleton-item
                      variant="text"
                      class="name show"
                      style="width: 180px"
                    />
                  </span>
                </div>
              </div>
            </template>
          </el-skeleton>
          <div class="user fl" v-else>
            <div class="pic">
              <img
                v-if="memberInfo?.headimg"
                :src="`${baseurl}${memberInfo?.headimg}`"
              />
              <img v-else :src="`${imgurl}pic.jpg`" />
              <span class="sex show girl" v-if="memberInfo?.sex == '女'"></span>
              <span class="sex show" v-else></span>
            </div>
            <div class="cont">
              <span class="icon">{{
                memberInfo?.identity == "丝网买家" ? "买" : "企"
              }}</span>
              <span class="name show">{{ memberInfo?.nickname }}</span>
              <span class="tell show">{{ memberInfo?.phone }}</span>
              <span class="title show">{{ memberInfo?.companyname }}</span>
              <span class="btnEdit show">资料编辑</span>
            </div>
          </div>
        </div>
        <div class="fraction">
          <span class="tit-1 show mr">
            <i>{{ memberInfo ? getArea(memberInfo?.integral) : 0 }}</i
            >积分
          </span>
          <span class="tit-1 show cur" @click="toIntegral">积分奖励说明 ></span>
        </div>
      </div>
      <div class="inforBox">
        <span class="title flexC">个人信息</span>
        <div class="content">
          <div class="avatarBox">
            <span class="btnAdd" @click="openUpload">上传头像</span>
            <span class="tit show"
              >仅支持JPG. GIF. PNG. JPEG. BMP格式，文件小于4M</span
            >
            <div class="avatarCon flexC" v-if="headimg">
              <img :src="`${baseurl}${headimg}`" />
            </div>
            <div class="avatarCon flexC" v-else>请上传头像</div>
            <AvatarCropper
              v-if="dialogVisible"
              :dialogVisible.sync="dialogVisible"
              @closeAvatarDialog="closeAvatarDialog"
            ></AvatarCropper>
          </div>
          <div class="infoR">
            <div class="code clearfix">
              <span class="spanL">账号名称</span>
              <input
                class="text"
                v-model="nickname"
                type="text"
                placeholder="请输入账号名称"
              />
            </div>
            <div class="code clearfix">
              <span class="spanL">性别</span>
              <div class="sexList fl">
                <span
                  :class="[{ active: sex == item.name }, 'sex']"
                  v-for="(item, k) in sexList"
                  :key="k"
                  @click="checkSex(item.name)"
                >
                  {{ item.name }}
                </span>
              </div>
            </div>
            <div class="code clearfix">
              <span class="spanL">生日</span>
              <select v-model="selectedYear" class="select">
                <option v-for="year in yearList" :key="year" :value="year">
                  {{ year }}
                </option>
              </select>
              <span class="day">年</span>
              <select v-model="selectedMonth" class="select">
                <option v-for="month in mouthList" :key="month" :value="month">
                  {{ month }}
                </option>
              </select>
              <span class="day">月</span>
              <select v-model="selectedDay" class="select m5T">
                <option v-for="day in daysInMonth" :key="day" :value="day">
                  {{ day }}
                </option>
              </select>
              <span class="day m5T">日</span>
              <span class="js m5T">填生日有惊喜~</span>
            </div>
            <div class="code clearfix">
              <span class="spanL">企业名称</span>
              <input
                class="text"
                v-model="companyname"
                type="text"
                placeholder="请输入账号名称"
              />
            </div>
            <div
              class="code clearfix"
              v-if="memberInfo?.identity != '丝网买家'"
            >
              <span class="spanL">用户角色</span>
              <div class="text textnode" @click="openRole">{{ rolename }}</div>
              <span
                :class="[{ active: isRole }, 'btnup']"
                @click="openRole"
              ></span>
              <div class="selectBox" v-if="isRole">
                <ul>
                  <li
                    :class="roleId == item.id ? 'active' : ''"
                    v-for="(item, index) in roleList"
                    :key="index"
                    @click="checkRole(index)"
                  >
                    {{ item.title }}
                  </li>
                </ul>
                <input
                  type="input"
                  :class="[{ active: isInput }, 'input']"
                  @input="roleText"
                  v-model="roles"
                  placeholder="其他"
                />
                <span class="dui" v-if="roles" @click="openRole"></span>
              </div>
            </div>
            <div class="code clearfix">
              <span class="spanL">兴趣产业</span>
              <div class="list fl clearfix">
                <span
                  :class="[
                    { active: item.isCheck },
                    { short: item.title.length < 3 },
                    'listLi span',
                  ]"
                  v-for="(item, index) in indusList"
                  :key="index"
                  @click="checkIndus(item.id)"
                >
                  {{ item.title }}
                </span>
                <span
                  v-if="!isOther && !otherindustry"
                  class="listLi span"
                  :key="index"
                  @click="getohter"
                >
                  其他
                </span>
                <input
                  v-else
                  maxlength="8"
                  type="input"
                  class="active infoText"
                  @input="infoText"
                  @blur="handelInput4"
                  v-model="otherindustry"
                  placeholder="其他(最多输入8个字)"
                />
              </div>
            </div>
          </div>
        </div>
        <span class="btnSave flexC" @click="onSave">保存资料</span>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { useRouter, useRoute } from "vue-router";
import AvatarCropper from "./avatarCropper.vue";
import { useUserStore } from "@/store/modules/user";
import { getArea, getDatetamp } from "../../utils/base.ts";
const userInfo = useUserStore();
const dialogVisible = ref<boolean>(false);
const closeAvatarDialog = (data) => {
  dialogVisible.value = false;
  headimg.value = data.imgurl;
};
const router = useRouter();
const imgurl = import.meta.env.VITE_APP_TITLE + "/assets/images/";
const shopurl = import.meta.env.VITE_APP_TITLE + "/assets/shop/";
const baseurl = inject("$baseurl", null as any);
const indusList = ref<any>([]);
const api = inject("$base", null as any);
const indusArr = ref<any>([]);
const selectedYear = ref("");
const selectedMonth = ref("");
const selectedDay = ref("");
const memberInfo = ref<any>();
const nickname = ref<string>();
const companyname = ref<string>();
const sex = ref<string>();
const headimg = ref<string>();
const birth = ref<string>();
const sexList = ref<any>([
  { name: "男", id: 1 },
  { name: "女", id: 2 },
  { name: "保密", id: 3 },
]);
const industry = ref<string>();
const isMember = ref(true);
const isOther = ref<boolean>(false);
const otherindustry = ref<string>();
const roleList = ref<any>([]);
const isRole = ref<boolean>(false);
const roleId = ref<number>();
const rolename = ref<string>("角色选择（单选）");
const roles = ref<string>();
const debounceTimer = ref(null);
const isInput = ref<boolean>(false);
const yearList = computed(() => {
  const currentYear = new Date().getFullYear();
  return Array.from(
    { length: currentYear - 1900 + 1 },
    (_, i) => currentYear - i
  );
});
const mouthList = computed(() => {
  return Array.from({ length: 12 }, (_, i) => {
    const month = i + 1;
    return month < 10 ? "0" + month : month.toString();
  });
});
const daysInMonth = computed(() => {
  const days = new Date(selectedYear.value, selectedMonth.value, 0).getDate();
  return Array.from({ length: days }, (_, i) => {
    const day = i + 1;
    return day < 10 ? "0" + day : day.toString();
  });
});

watch([selectedYear, selectedMonth], () => {
  if (selectedDay.value > daysInMonth.value[daysInMonth.value.length - 1]) {
    selectedDay.value = daysInMonth.value[daysInMonth.value.length - 1];
  }
});
function openRole() {
  isRole.value = !isRole.value;
  if (roles.value) {
    rolename.value = roles.value;
    roleId.value = "";
  }
}
function checkRole(index: number) {
  rolename.value = roleList.value[index].title;
  isRole.value = false;
  roleId.value = roleList.value[index].id;
  roles.value = "";
}
function roleText() {
  isInput.value = true;
}
function getrole() {
  api.rolelist().then((res) => {
    roleList.value = res.data;
    let isHave = false;
    roleList.value.forEach((item) => {
      if (item.title == rolename.value) {
        roleId.value = item.id;
        isHave = true;
      }
    });
    if (!isHave) {
      roles.value = rolename.value;
    }
  });
}
function toUrl(url) {
  router.push({
    path: url,
  });
}
function toIntegral() {
  router
    .push({
      path: `/integral`,
    })
    .catch((err) => {
      console.error(err);
    });
}
function getindustry() {
  api.industrylist().then((res) => {
    indusList.value = res.data;
    let list = industry.value.split(",");
    indusList.value.forEach((item) => {
      list.forEach((li) => {
        if (li == item.title) {
          item.isCheck = true;
        }
      });
    });
  });
}
function checkIndus(id: number) {
  indusList.value.forEach((item) => {
    if (item.id == id) {
      item.isCheck = !item.isCheck;
    }
  });
}
function memberinfo() {
  api.memberinfo({ id: userInfo.userIds }).then((res) => {
    isMember.value = false;
    memberInfo.value = res.data;
    nickname.value = res.data.nickname;
    companyname.value = res.data.companyname;
    sex.value = res.data.sex;
    industry.value = res.data.industry;
    headimg.value = res.data.headimg;
    birth.value = Number(res.data.birth);
    let date = getDatetamp(birth.value);
    selectedYear.value = date.year;
    selectedMonth.value = date.month;
    selectedDay.value = date.day;
    otherindustry.value = res.data.otherindustry;
    rolename.value = res.data.role;
    getindustry();
    getrole();
  });
}
function openUpload() {
  dialogVisible.value = true;
}
function checkSex(name: string) {
  sex.value = name;
}
function getohter() {
  isOther.value = !isOther.value;
}
function handelInput4() {
  if (!otherindustry.value) {
    isOther.value = false;
  }
}
function onSave() {
  // if(!headimg.value){
  // 	ElMessage({
  // 		message: '请上传用户头像',
  // 		type: 'error',
  // 	})
  // 	return;
  // }
  // if(!sex.value){
  // 	ElMessage({
  // 		message: '请选择性别',
  // 		type: 'error',
  // 	})
  // 	return;
  // }
  // if(!birth.value){
  // 	ElMessage({
  // 		message: '请选择生日',
  // 		type: 'success',
  // 	})
  // 	return;
  // }
  // if(!companyname.value){
  // 	ElMessage({
  // 		message: '请输入企业名称',
  // 		type: 'error',
  // 	})
  // 	return;
  // }
  if (selectedYear.value && selectedMonth.value && selectedDay.value) {
    const dateStr =
      selectedYear.value + "-" + selectedMonth.value + "-" + selectedDay.value;
    birth.value = new Date(dateStr).getTime() / 1000;
  } else if (selectedYear.value || selectedMonth.value || selectedDay.value) {
    if (!selectedYear.value) {
      ElMessage({
        message: "请完善生日年份",
        type: "error",
      });
      return;
    }
    if (!selectedMonth.value) {
      ElMessage({
        message: "请完善生日月份",
        type: "error",
      });
      return;
    }
    if (!selectedDay.value) {
      ElMessage({
        message: "请完善生日日期",
        type: "error",
      });
      return;
    }
  }
  let arr = [];
  indusList.value.forEach((item) => {
    if (item.isCheck) {
      arr.push(item.title);
    }
  });
  let data = {
    id: userInfo.userIds,
    industry: arr.join(","),
    companyname: companyname.value,
    sex: sex.value,
    headimg: headimg.value,
    birth: birth.value,
    nickname: nickname.value,
    otherindustry: otherindustry.value,
  };
  if (memberInfo.value.identity != "丝网买家") {
    data.role = rolename.value;
  }
  api.updatememberinfo(data).then((res) => {
    ElMessage({
      message: "用户信息已完善",
      type: "success",
    });
    setTimeout(() => {
      router.push({
        path: `/member`,
      });
    }, 1000);
  });
}
onMounted(() => {
  memberinfo();
});
</script>
<style lang="scss" scoped>
.box {
  background: url(../../assets/shop/bg.jpg) no-repeat top center #e9f0fa;
  background-size: 100% auto;
  padding-bottom: 80px;
  min-height: 100vh;
  font-family: "siyuanN";
}
.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
header {
  width: 100%;
  padding: 0 60px;
  height: 75px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .logo {
    cursor: pointer;
    display: inline-block;
    height: 25px;
  }
  nav {
    padding: 0 15px;
    float: left;
    height: 100%;
  }
  .title {
    font-size: 16px;
    padding: 0 15px;
    height: 100%;
    float: left;
    cursor: pointer;
    position: relative;
    i {
      font-style: normal;
      display: inline-block;
      height: 100%;
      position: relative;
      font-family: "siyuanR";
      color: #d7e2f8;
      height: 100%;
      transition: all 0.5s;
      transform-origin: center;
      align-items: center;
      justify-content: center;
      display: flex;
      &::after {
        position: absolute;
        bottom: 8px;
        content: "";
        left: 50%;
        width: 0;
        height: 4px;
        background-image: linear-gradient(to right, #90e6ff, #9cfacd);
        border-radius: 4px;
        transition: all 0.5s;
      }
    }
    &.active {
      i {
        font-family: "siyuanM";
        color: #ffffff;
        &:after {
          width: 100%;
          left: 0;
        }
      }
    }
    &:hover {
      i {
        color: #9cfacd;
      }
    }
  }
}
.userInfo {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 40px 35px 35px 60px;
  .user {
    width: auto;
    display: flex;
  }
  .pic {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px;
    margin: 0 20px 0 0;
    position: relative;
    .sex {
      background: url(../../assets/shop/sex.png) no-repeat;
      background-size: 100%;
      width: 18px;
      height: 19px;
      position: absolute;
      right: 0;
      bottom: 5px;
      z-index: 10;
      &.girl {
        background: url(../../assets/shop/girl.png) no-repeat;
        background-size: 100%;
      }
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: solid 1px #fff;
    }
  }
  .cont {
    color: #fff;
    padding-left: 25px;
    position: relative;
    padding-top: 10px;

    .icon {
      background: url(../../assets/shop/diamond.png) no-repeat;
      background-size: 100%;
      width: 18px;
      height: 18px;
      position: absolute;
      left: 0;
      font-size: 8px;
      font-family: "siyuanR";
      text-align: center;
      line-height: 14px;
      top: 14px;
    }
    .name {
      font-size: 18px;
      line-height: 26px;
      font-family: "siyuanM";
    }
    .tell {
      font-size: 15px;
      line-height: 22px;
    }
    .title {
      font-size: 15px;
      line-height: 28px;
    }
    .btnEdit {
      background: url(../../assets/shop/btnEdit.png) no-repeat;
      background-size: 100%;
      width: 115px;
      height: 35px;
      color: #000000;
      font-size: 15px;
      text-align: center;
      line-height: 35px;
      margin: 8px 0 0 0;
      cursor: pointer;
    }
  }
  .fraction {
    color: #fff;
    .mr {
      margin-right: 10px;
    }
    .tit-1 {
      text-align: right;
      white-space: nowrap;
      i {
        font-style: normal;
        font-size: 36px;
        font-family: "DIN";
        font-weight: 600;
        margin-right: 5px;
      }
      font-size: 15px;
    }
  }
}
.inforBox {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  padding-bottom: 60px;
  .title {
    width: 100%;
    height: 100px;
    font-size: 18px;
    color: #333333;
  }
  .content {
    width: 100%;
    max-width: 1080px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
  }
  .avatarBox {
    width: calc(100% - 585px);
    .btnAdd {
      width: 113px;
      height: 30px;
      background: url(../../assets/shop/upload.png) no-repeat;
      background-size: 100%;
      padding-left: 40px;
      display: block;
      line-height: 30px;
      font-size: 14px;
      color: #2379f7;
      cursor: pointer;
    }
    .tit {
      font-size: 13px;
      color: #9094b0;
      line-height: 40px;
    }
    .avatarCon {
      width: 100%;
      height: 238px;
      border: solid 1px #e9eef5;
      background: #f8fbfd;
      border-radius: 8px;
      color: #999;
      img {
        width: 180px;
        height: 180px;
        object-fit: cover;
      }
    }
  }
  .btnSave {
    background: #2379f7;
    color: #fff;
    width: 120px;
    height: 35px;
    border-radius: 20px;
    margin: 45px 15px;
    cursor: pointer;
    margin: 40px auto 0;
    font-size: 15px;
  }
}
.infoR {
  width: 535px;
  .code {
    width: 100%;
    margin: 16px 0;
    font-size: 14px;
    color: #666666;
    padding-left: 80px;
    position: relative;
    .spanL {
      width: 65px;
      text-align: justify;
      text-align-last: justify;
      font-size: 14px;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 32px;
    }
    .selectBox {
      background: #fff;
      position: absolute;
      left: 80px;
      top: 36px;
      width: 310px;
      border: solid 1px #dbe2ee;
      box-shadow: 2px 3px 7px rgba(166, 182, 229, 0.41);
      height: auto;
      border-radius: 5px;
      padding: 10px 20px;
      z-index: 99;
      .dui {
        background: url(../../assets/images/icon_dui.png) no-repeat center
          center;
        background-size: 10px 10px;
        width: 30px;
        height: 28px;
        position: absolute;
        display: block;
        right: 20px;
        bottom: 10px;
        cursor: pointer;
      }
      .input {
        border: solid 1px #d3e0ee;
        border-radius: 5px;
        width: 100%;
        height: 30px;
        background: none;
        outline: none;
        padding: 0 18px;
        color: #9094b0;
        margin-top: 5px;
        flex: 1;
        &::placeholder {
          color: #9094b0;
        }
        &.active {
          color: #448efb;
          border: solid 1px #619ef8;
        }
      }
      ul {
        height: auto;
        // overflow-y:scroll;
        li {
          color: #9094b0;
          padding-left: 16px;
          cursor: pointer;
          font-size: 12px;
          line-height: 26px;
          &:hover,
          &.active {
            color: #2379f7;
            position: relative;
            &::after {
              background: #448efb;
              width: 6px;
              height: 6px;
              left: 2px;
              top: 50%;
              transform: translateY(-50%);
              content: "";
              position: absolute;
              border-radius: 50%;
            }
          }
        }
      }
    }
    .select {
      border: solid 1px #dbe2ee;
      border-radius: 5px;
      width: 88px;
      height: 32px;
      padding: 0 15px;
      line-height: 30px;
      outline: none;
    }
    .day {
      width: 32px;
      text-align: center;
      display: inline-block;
    }
    .js {
      font-size: 12px;
      color: #9094b0;
    }
    .sexList {
      width: 100%;
      .sex {
        padding-left: 20px;
        line-height: 32px;
        position: relative;
        margin-right: 30px;
        cursor: pointer;
        &::before,
        &::after {
          position: absolute;
          left: 0;
          content: "";
          top: 50%;
          transform: translateY(-50%);
          border-radius: 50%;
        }
        &::before {
          width: 15px;
          height: 15px;
          border: solid 1px #9a9eb7;
        }
        &::after {
          width: 7px;
          height: 7px;
          background: #666666;
          left: 4px;
          opacity: 0;
        }
        &.active {
          &::after {
            opacity: 1;
          }
        }
      }
    }
    .text {
      border: solid 1px #dbe2ee;
      border-radius: 5px;
      width: 310px;
      height: 32px;
      padding: 0 15px;
      line-height: 30px;
      outline: none;
      &.textnode {
        user-select: none;
        cursor: default;
        cursor: pointer;
      }
    }
    .btnup {
      position: absolute;
      height: 32px;
      left: 350px;
      width: 40px;
      top: 0;
      background: url(../../assets/images/btnup.png) no-repeat center center;
      background-size: 8px 5px;
      cursor: pointer;
      transition: all 0.6s;
      user-select: none;
      cursor: pointer;
      &.active {
        transform: rotate(360deg);
      }
    }
  }
  .list {
    width: calc(100% + 92px);
    margin-left: -86px;
    text-align: justify;
    margin-top: 32px;
    .listLi {
      color: #9094b0;
      font-size: 12px;
      padding: 0 15px;
      border: solid 1px #dbe2ee;
      border-radius: 5px;
      height: 32px;
      display: flex;
      align-items: center;
      float: left;
      background: #f8fbfd;
      cursor: pointer;
      margin: 5px 6px;
      &:hover {
        color: #448efb;
        border: solid 1px #448efb;
      }
      &.active {
        background: #448efb;
        color: #fff;
      }
    }
    .infoText {
      border: solid 1px #d3e0ee;
      border-radius: 5px;
      width: 160px;
      height: 32px;
      background: none;
      outline: none;
      padding: 0 15px;
      color: #9094b0;
      margin-top: 5px;
      &::placeholder {
        color: #9094b0;
      }
      &.active {
        color: #448efb;
        border: solid 1px #619ef8;
      }
    }
  }
}
@media (max-width: 768px) {
  .box {
    background-size: 1600px auto;
  }
  .userInfo {
    padding: 30px;
    display: block;
    .cont {
      .btnEdit {
        margin: 8px 0;
      }
    }
    .logo {
      width: 100%;
      margin-bottom: 20px;
    }
    .pic {
      margin: 0 20px 0 0;
    }
    .fraction {
      width: 100%;
      .tit-1 {
        text-align: left;
      }
    }
  }
  .inforBox {
    .content {
      display: block;
      padding: 0 20px;
    }
    .avatarBox {
      width: 100%;
    }
  }
  .infoR {
    width: 100%;
    .code {
      .text {
        width: calc(100% - 90px);
      }
      .spanL {
        width: 60px;
      }
    }
  }
  .m5T {
    margin-top: 8px;
  }
  header {
    padding: 0 0 0 20px;
    nav {
      padding: 0 10px;
    }
    .title {
      padding: 0 10px;
      font-size: 14px;
    }
  }
}
</style>